<template>
  <div class="Learning-index">
    <codeContainer>
      <template #default>
        <div class="flex v h">
          父组件：<input type="color" name="" v-model="color">
        </div>
        <chi v-model="color"></chi>
      </template>
      <template #code>
          <pre data-type="js">
            {{ codeFragment["vueUseVModel1"] }}
          </pre>
      </template>
    </codeContainer>
    <h3>实现 <code>useVModel</code></h3>
    <div class="code-source-wrapper" v-highlight>
      <pre data-type="js">
        {{ codeFragment["vueUseVModel2"] }}
      </pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import codeFragment from '../../assets/js/codeFragment';
// codeFragment-split
// 父组件
import Chi from './chi.vue';

// 传递给子组件
const color = ref('#ff0000');

</script>
